<script setup>
import IconNotice from '@/components/icons/IconNotice.vue'
import { ref, onMounted, inject, watch } from 'vue'
import documentApi from '@/apis/document'

const isSmallPage = inject('isSmallPage')
const dialogVisible = ref(false)
const notice = ref({})
const dismiss = ref(sessionStorage.getItem('dismiss_notice') === 'true')

const getData = async () => {
  notice.value = (await documentApi.page('notice')).data
}

const handleClose = () => {
  sessionStorage.setItem('dismiss_notice', dismiss.value ? true : false)
}

const show = () => {
  dialogVisible.value = true
}

onMounted(() => {
  //获取公告
  if (!dismiss.value) {
    getData().then(() => {
      dialogVisible.value = true
    })
  }
})

watch(dialogVisible, (newValue) => {
  if (newValue && !notice.value?.content) {
    getData()
  }
})

defineExpose({
  show,
})
</script>

<template>
  <div @click="show">
    <slot>
      <el-button style="width: 32px" @click.stop="show" title="公告">
        <IconNotice />
      </el-button>
    </slot>
  </div>
  <el-dialog
    append-to-body
    v-model="dialogVisible"
    title="公告"
    @close="handleClose"
    :width="isSmallPage ? '90%' : '650px'"
  >
    <div class="flex flex-col max-h-[65vh] min-h-[400px]">
      <ArticleProse class="flex-1 overflow-y-auto" :content="notice.content"></ArticleProse>
      <div class="flex justify-end mt-3">
        <label for="dismiss" class="mr-2 flex items-center">
          <el-checkbox class="ml-2" v-model="dismiss" />
          <span class="ml-1">不再提示</span>
        </label>
        <el-button type="primary" @click="dialogVisible = false">知道了</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped></style>
